<template>
  <div class="intereviews-box">
    <div class="interviews">
      <!-- <avatar :src="ImgSys" /> -->
      <h4>你好,请填写您的面试基本信息</h4>
      <ul>
        <li v-for="item in interviewList" :key="item.id">
          <label><input type="radio" name="type" v-model="select.name" :value="item.name"
              @change="select.nameID = item.id; confirmIdentity.identity = item.name; handitemDataList = item.subLevelModelList;"><span>{{
                item.name
              }}</span></label>
        </li>
      </ul>
      <ul v-if="handitemDataList.length" class="handitemDataList">
        <li v-for="item in handitemDataList">
          <label>
            <input type="radio" :value="item.years" v-model="select.years" name="handitemDataList" :key="item.id"
              @change="select.yearsId = item.id; isShowindustryBox = true; confirmIdentity.years = item.years"><span>{{
                item.years
              }}</span>
          </label>
        </li>
      </ul>
    </div>
    <div v-if="isShowindustryBox">
      <div class="confirm-box">
        <h4>好的</h4>
        <h4>您选择的身份是:{{ ' ' + select.name + ' ' + select.years }}</h4>
        <p>请填写您面试的岗位，请问您面试什么岗位</p>
        <!-- 三级菜单 -->
        <div class="selsctArray">
          <!-- 岗位大方向定位 -->
          <ul class="select-title">
            <li v-for="item in subLevelModelListArray" :key="item.id" :class="item.id == activeId.code ? 'active' : ''"
              @click="selectTitleListAPI(item.subLevelModelList, item.id)">
              {{ item.name }}
            </li>
          </ul>
          <div class="selectList">
            <!-- //二级标题 -->
            <ul class="selectListItem">
              <li v-for="item in selectTitleList" :key="item.parentId"
                :class="item.code == activeId.parentCode ? 'active' : ''"
                @click="selectTitleListItemAPI(item.subLevelModelList, item.code as number)">
                {{ item.name }}
              </li>
            </ul>
            <!-- 三级标题 -->
            <ul class="selectList-content">
              <li v-for="item in selectTitleListItem" :key="item.parentId"
                :class="item.code == activeId.parentCodeListId ? 'active' : ''"
                @click="selectionTieltItemCenter(item, item.code as number); select.postName = item.name">
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- //三级标题详细 -->
      <div class="center" v-if="iscontentShow">
        <h4>好的!
        </h4>
        <h4>
          确认信息: 您是{{ select.name + ' ' + select.years }}，岗位是：{{ select.postName }}。面试公司职责为:
        </h4>
        <div class="center-content" v-if="isCustomize" v-html="seletionCenter">
        </div>
        <div v-else class="center-content">
          <h2>岗位职责:</h2>
          <el-input type="text"  v-model="titleText.title"/>
          <h2>任职要求:</h2>
          <el-input type="text" v-model="titleText.center" />
        </div>
        <div style="display: flex;justify-content: center; margin: 10px">
          <el-button style="background-color: #c90000; color: aliceblue;" @click="confirm">请您仔细阅读，并确认信息，面试开始</el-button>
          <el-button @click="isCustomize = false">自定义职责</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { getInterViewsList, occupationList, type IsubLevelModelList, confirmIdentityAPI } from '@/api/chat'
import { ElMessage } from 'element-plus'
import { ref, watch, reactive, watchEffect } from 'vue';
import ImgSys from '@/assets/img/logo1x.png'
import { userInfoStore } from '@/stores/userInfo';
import { useRoute } from 'vue-router';


const interviewList = ref<any>([])
getInterViewsList().then(
  (res) => {
    console.log(res);
    interviewList.value = res.data
   },
  (rej) => { }
)

const titleText = reactive({
  title: '',
  center:''
})

const handitemDataList =ref<{id:number;yeats:string}[]>([])

const select = ref<{
  name: string;
  nameID:string;
  years:string;
  yearsId:string;
  postName:string
}>({
  name:'',
  nameID:'',
  years:'',
  yearsId:'',
  postName:''
})

const occupationListData = ref<any>([])
const subLevelModelListArray = ref<IsubLevelModelList[]>([])
interface IselectModelList{
chatId 	: 	string; 	
identity 	: 	string ;	
userId 	: 	string ;	
years 	: 	string ;	
post 	: 	string 	;
}
//二级 
const selectTitleList = ref<{
  code:number;
  name:string;
  parentCode:string|number;
  parentId: string | number;
  subLevelModelList:any
}[]>([])
//三级 
const selectTitleListItem = ref<{
  code: number;
  name: string;
  parentCode: string | number;
  parentId: string | number;
  duty: string;
}[]>([])
//内容
const seletionCenter = ref<string>('')

// 选中的内容
const activeId = reactive({
  code: 1,
  parentCode: 1,
  parentCodeListId: 1,
})
// 点一级看二级
const selectTitleListAPI = (e:any,id:number)=>{
  selectTitleList.value = e
  activeId.code = id
}
//点二级 看三级 
const selectTitleListItemAPI = (e: any, id: number)=>{
  selectTitleListItem.value = e
  activeId.parentCode = id

}
//点三级 看详情
const iscontentShow = ref(false)
const selectionTieltItemCenter = (e: any, id: any)=>{
  console.log('3', e.duty);
  activeId.parentCodeListId = id;
  confirmIdentity.value.post =id
  if (e.duty == null) {
    seletionCenter.value = ''
    isCustomize.value = false
    return
  }
  let html = e.duty.replace(/\n/g, '<br>')
  seletionCenter.value = html
  isCustomize.value = true
  iscontentShow.value = true
}

//是否自定义工作职责
const isCustomize = ref(true)

// watch(() => seletionCenter,(newval,oldval)=>{
//   console.log(newval,oldval);
// })
//查询职业列表
const ModelListApi = ()=>{
  occupationList().then(res=>{
    console.log(res);
    if(res.data.length != 0){
      subLevelModelListArray.value = res.data
      selectTitleList.value = res.data[0].subLevelModelList
      selectTitleListItem.value = selectTitleList.value[0].subLevelModelList
      
    }
  })
}
ModelListApi()

const isShowindustryBox = ref(false)


const route =useRoute()
const confirmIdentity = ref<IselectModelList>({
  chatId: route.query.chatId as string,
  identity: select.value.name,
  userId: (userInfoStore().userInfo.userId as string),
  years: select.value.yearsId,
  post: ''
})

// 提交信息
const emit = defineEmits()
const confirm =async () => {
  try{
    let res = await confirmIdentityAPI(confirmIdentity.value)
    if(res){
      console.log(res);
      emit('update')
      titleText.center = ''
      titleText.title = ''
    }
  } catch(err){
    console.log(err);    
  }

}


watch(() => select.value.name, (newVal, oldVal) => {
  if (newVal !== '社招') {
    select.value.years = ''
    isShowindustryBox.value = true;
    confirmIdentity.value.years = ''
  }
})

watch(() => selectTitleList.value, (newVal, oldVal) => {
  // console.log('新的 ',newVal);
  selectTitleListItem.value = newVal[0].subLevelModelList;
  activeId.parentCode = newVal[0].code
})
// 提交的信息 userInfoStore
watchEffect(() => {
  confirmIdentity.value.chatId = route.query.chatId as string
})
</script>
<style scoped lang='scss'>

.intereviews{
  overflow-y: auto;
  overflow-x:hidden ;
  height: 100%;
}


.interviews{
    width: 100%;
      padding: 10px 0 ;
      border-radius: 11px;
      box-sizing: border-box;
      background-color: #fff; 
  ul {
    display: flex;
      width: 790px;

    li{
      width: 20%;
      min-width: 50px;
        label{
          display: flex;
          margin :10px;
          cursor: pointer;
          /* 使用伪类 [checked] 来选择选中的单选按钮 */
          // input{
          //   display: inline-block;
          //   position: relative;
          // }
          //   input[type="radio"]:checked::after {
          //     content: '';
          //     width: 20px;
          //  border-color: red !important;
          //    background-color: red !important;
          //   }
        }
    }
  }




  .handitemDataList{
    border: 0.1vw dashed #a7a7a7;
    padding: 10px;
    border-radius: 1vw;
  }
}
.confirm-box{
  background-color: #fff;
  margin: 15px 0;
  padding: 10px;
  >p{
          line-height: 16px;
          color: #c90000;
          padding:  8px;
          box-sizing: border-box;
         border: 0.1vw solid #c90000;
         border-radius: 7px;
         margin: 10px 0;
  }

.selsctArray{
  display: flex;
  width: 100%;
  min-height: 200px;
        border: 0.1vw solid #dbdbdb;
        border-radius: 7px;
  li:hover{
    cursor: pointer;
    color: #c90000;
  }
  .select-title{
    position: relative;
      padding: 10px;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content:start;
    align-items: center;
    li{
      padding: 10px 0;
    }
  }
  .select-title::after{
            content: '';
            display: block;
            height: 80%;
            width: 1px;
            background-color: #ccc;
            position: absolute;
            right: 0;
            top: 10%;
  }
    
      .selectList{
        flex: 1;
      display: flex;
      flex-direction: column;
      padding: 15px;

        .selectListItem{
          display: flex;
          width: 100%;
          padding: 10px;
          li{
            padding: 5px;
            min-width: 50px;
            margin-right: 10px; 
          }

        }
        .selectList-content{
          display: flex;
          flex-wrap: wrap;
          border: 0.1vw dashed #ccc ;
          border-radius: 7px;
          padding: 10px;
          li {
            padding: 5px;
            margin: 10px 0;
            box-sizing: border-box;
            width: 25%;
          }
        }
     }
}
}

.center{
  background-color: #fff;
  border-radius: 7px;
  padding: 10px;

}
.active{
  color:#c90000;
}
</style>
